<template>
  <div class="basic-card flex ">
    <ul class="nav">
      <li v-for="item in catalogList" :key="item.name" :class="{'active': activeCatalog === item.name}" @click="goAnchor(item.name)">{{ item.title }}</li>
    </ul>
    <div class="box-container">
      <el-form :model="form" label-width="130px" class="corp-form" @scroll.native="handleScroll">
        <div v-for="item in catalogList" :key="item.name" class="box">
          <div :class="['title', item.name]">{{ item.title }}</div>
          <div class="content">
            <equipment
              v-if="item.name === 'equipment'"
              v-model="form.equipItems"
              :disabled="status === 2 && !isEditing"
              @change="data => handleItemsChange('equipItems', data)"
            />
            <evaluate
              v-else-if="item.name === 'evaluate'"
              v-model="form"
              :disabled="status === 2 && !isEditing"
              @change="handleChange"
            />
            <waste-gas
              v-else-if="item.name === 'wasteGas'"
              v-model="form"
              :disabled="status === 2 && !isEditing"
              @change="handleChange"
            />
            <waste-solid
              v-else-if="item.name === 'wasteSolid'"
              v-model="form"
              :disabled="status === 2 && !isEditing"
              @change="handleChange"
            />
            <waste-product
              v-else-if="item.name === 'wasteProduct'"
              v-model="form"
              :disabled="status === 2 && !isEditing"
              @change="handleChange"
            />
            <component :is="item.name" v-else v-model="form" :disabled="status === 2 && !isEditing" />
          </div>
        </div>
      </el-form>

      <!-- status: -10 表示是企业详情tab -->
      <div v-if="status !== -1" class="footer">
        <div v-if="status !== 2 && status !== -10" class="btn cancel" @click="onCancel">取消</div>
        <div v-if="status === 0" class="btn confirm" @click="onStart">启动</div>
        <div v-if="status === 1 || status === -10" class="btn confirm" @click="onConfirm">{{ status === 1 ? '暂存' : '保存' }}</div>
        <div v-if="status === 1" class="btn submit" @click="onSubmit">完成</div>
        <div v-if="status === 1" class="btn terminate" @click="onTerminate">终止</div>
        <template v-if="status === 2 && isAdmin">
          <div v-if="isEditing" class="btn cancel" @click="onCorrectCancel">取消</div>
          <div class="btn confirm" @click="onCorrect">更正</div>
        </template>
        <div v-if="status === 2 || status === -10" class="btn submit" @click="onExport">导出报表</div>
        <div v-if="status === 2" class="btn" @click="onExportAll">导出全部</div>
      </div>
    </div>
  </div>
</template>
<script>
import Basic from './basic/Basic'
import Equipment from './basic/Equipment'
import Craft from './basic/Craft'
import Evaluate from './basic/Evaluate'
import Sewage from './basic/Sewage'
import Emergency from './basic/Emergency'
import Monitor from './basic/Monitor'
import Clean from './basic/Clean'
import WasteWater from './basic/WasteWater'
import WasteGas from './basic/WasteGas'
import Noise from './basic/Noise'
import WasteSolid from './basic/WasteSolid'
import WasteProduct from './basic/WasteProduct'

export default {
  name: 'BasicCard',
  components: { Basic, Equipment, Craft, Evaluate, Sewage, Emergency, Monitor, Clean, WasteWater, WasteGas, Noise, WasteSolid, WasteProduct },
  props: {
    corpInfo: {
      type: Object,
      required: true
    },
    isAdmin: Boolean,
    status: {
      type: Number,
      default: -1
    }
  },
  data() {
    return {
      isEditing: false, // 是否处于更正状态
      form: {},
      catalogList: [
        { title: '企业基本信息', name: 'basic' },
        { title: '主要工艺', name: 'craft' },
        { title: '主要生产设备', name: 'equipment' },
        { title: '环评情况', name: 'evaluate' },
        { title: '排污许可证', name: 'sewage' },
        { title: '应急预案', name: 'emergency' },
        { title: '土壤和地下水自行监测', name: 'monitor' },
        { title: '清洁生产', name: 'clean' },
        { title: '污水情况', name: 'wasteWater' },
        { title: '废气排放', name: 'wasteGas' },
        { title: '噪声防治', name: 'noise' },
        { title: '一般固废', name: 'wasteSolid' },
        { title: '危废生产', name: 'wasteProduct' }
      ],
      clicked: false,
      activeCatalog: 'basic',
      anchorOffsetMap: {} // 锚点从上到下的offsetTop数据
    }
  },
  watch: {
    corpInfo: {
      immediate: true,
      handler: function(val) {
        this.form = {
          ...val,
          busiType: val.busiType ? val.busiType.split(',') : []
        }
        setTimeout(this.initAnchorData, 100)
      }
    }
  },
  methods: {
    // 初始化anchor高度
    initAnchorData() {
      this.catalogList.forEach(catalog => {
        this.anchorOffsetMap[catalog.name] = document.querySelector(`.${catalog.name}`) ? document.querySelector(`.${catalog.name}`).offsetTop : 0
      })
    },

    goAnchor(catalog) {
      this.clicked = true
      this.activeCatalog = catalog
      const el = document.querySelector('.corp-form')
      el.scrollTo({
        top: this.anchorOffsetMap[catalog] - 5,
        behavior: 'smooth'
      })
    },
    handleScroll(e) {
      const top = e.target.scrollTop
      let active = null
      this.catalogList.forEach(item => {
        if (top + 100 >= this.anchorOffsetMap[item.name]) {
          active = item.name
        }
      })
      if (this.clicked) {
        setTimeout(() => { this.clicked = false }, 1100)
      } else {
        this.activeCatalog = active
      }
    },

    handleItemsChange(type, data) {
      this.form[type] = data
      this.initAnchorData()
    },
    handleChange(data) {
      this.form = data
      this.initAnchorData()
    },

    getFormattedData() {
      const data = { ...this.form }
      if (data.reportStatus !== '有') data.reportItems = []
      if (data.wasteGasStatus !== '有废气排放') data.gasEquipmentItems = []
      if (data.solidWasteStatus !== '有') {
        data.solidArea = ''
        data.solidWasteItems = []
      }
      if (data.hwStatus !== '有') {
        data.hwArea = ''
        data.hwItems = []
      }
      // 排污许可证
      if (data.unloadingStatus !== '已申领') {
        data.unloadingType = ''
        data.unloadingDate = ''
        data.unloadingValidityBegin = ''
        data.unloadingValidityEnd = ''
      }
      // 应急预案
      if (data.mergencyRecordStatus !== '是') {
        data.mergencyRecordTime = ''
        data.mergencyLagoonStatus = ''
      }
      if (data.mergencyStatus !== '有') {
        data.mergencyRecordStatus = ''
        data.mergencyRecordTime = ''
        data.mergencyLagoonStatus = ''
      }
      // 土壤地下水监测
      if (data.waterMonitorStatus !== '已完成') data.waterMonitorTime = ''
      // 污水情况
      if (data.sewageTraceStatus !== '其他情况') data.sewageTraceRemark = ''
      if (data.sewageEquipStatus !== '有') data.sewageEquipRemark = ''
      if (data.sewageSolidStatus !== '有') data.sewageSolidRemark = ''
      // 噪声防治
      if (data.noiseMethod !== '有') data.noiseb = ''

      return data
    },

    onCancel() {
      this.$router.back()
    },
    // 启动
    onStart() {
      this.$emit('start')
    },
    onCorrectCancel() {
      this.isEditing = false
    },
    onCorrect() {
      if (this.isEditing) {
        this.isEditing = false
        this.$emit('correct', {
          type: 'info',
          formData: this.getFormattedData()
        })
      } else {
        this.isEditing = true
      }
    },
    // 保存
    onConfirm() {
      this.$emit('confirm', {
        type: 'info',
        formData: this.getFormattedData()
      })
    },
    // 完成
    onSubmit() {
      this.$emit('submit', {
        type: 'info',
        formData: this.getFormattedData()
      })
    },
    // 终止
    onTerminate() {
      this.$emit('terminate')
    },
    onExport() {
      this.$emit('export', 'info')
    },
    onExportAll() {
      this.$emit('export', 'all')
    }
  }
}
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/variables.scss";

.basic-card {
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}
ul {
  list-style: none;
  margin: 0;
  padding: 0;
  border-right: 1px solid $border-color;
  overflow: auto;
  li {
      padding: 10px 12px;
      white-space: nowrap;
      cursor: pointer;
      &.active {
        color: $primary-color;
        border-left: 3px $primary-color;
        box-shadow: -1px 0 $primary-color;
      }
    }
}
.box-container {
  display: flex;
  flex-direction: column;
  flex-grow: 2;
  padding-top: 10px;
}
.corp-form {
  margin-left: 20px;
  flex-grow: 2;
  overflow: auto;
}
.box {
  .title {
    position: relative;
    font-size: 14px;
    color: $label-color;
    line-height: 26px;
    padding-left: 10px;
    margin: 0 0 10px;
    text-align: initial;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 3px;
      bottom: 0;
      width: 3px;
      background-color: $primary-color;
      border-radius: 3px;
    }
  }
}
</style>
